import React, {PureComponent} from 'react';
import {Table, Alert, Badge, Switch, Icon, InputNumber, Tooltip, Popconfirm,Button} from 'antd';
import styles from './index.less';
import {powerControl} from '../../../utils/powerControl';
const AuthButton = powerControl(Button);

export default class AdConfigruationList extends PureComponent{
    state = {
        selectedRowKeys: [],
        totaCallNo: 0,
        expandedRowKeys: []
    };
    componentWillReceiveProps(nextProps){
        if (nextProps.selectedRows.length === 0){
            this.setState({
                selectedRowsKeys: [],
                totalCallNo: 0,
            });
        }
    }

    handleEditRow = (record, pagination) => {
        this.props.onEditRow(record, pagination);
    };

    handleTableChange = (pagination, filters, sorter) => {
        this.props.onChange(pagination, filters, sorter);
    };

    handleDelRow = (seat_id, pagination) => {
        this.props.onDelRow(seat_id, pagination);
    };
    onExpandedRowsChange =(expandedRows) =>{

        let expanded = [];
        expandedRows.map(function(k,index){
            if (index === expandedRows.length - 1){
                expanded.push(k);
            }

        });
        this.setState({
            expandedRowKeys: expanded
        })
    };

    render(){
        const {selectedRowKeys, totaCallNo} = this.state;
        const {data: {list, pagination}, loading, expandedRowRender} = this.props;
        const columns=[{
            title: '位置编码',
            dataIndex: 'seat_code',
            fixed: 'left',
            render: (val, record) =>{
                return<Tooltip placement="right" title={record.seat_code}>
                    <span>{val}</span>
                </Tooltip>
            }
        },{
            title: '位置名称',
            dataIndex: 'seat_name',
            render: (val, record) =>{
                return <Tooltip placement="right" title={record.seat_name}>
                    <span>{val}</span>
                </Tooltip>
            }
        },{
            title: '位置类型',
            dataIndex: 'seat_type',
            render: (val, record) =>{
                return<Tooltip placement="right" title={val === 1 ? '图片轮播' : val === 2 ? '图片静态广告' : '列表'}>
                    <span>{val === 1 ? '图片轮播' : val === 2 ? '图片静态广告' : '列表'}</span>
                </Tooltip>
            }
        },{
            title: '操作',
            // fixed: 'right',
            render: (val, record) => (
                <p>
                    <AuthButton auth="adConfigruation.edit" ghost  className={styles.btn} size="small" onClick={() => this.handleEditRow(record, pagination)}>编辑</AuthButton>
                    <span className={styles.splitLine}/>
                    <Popconfirm title="是否确定删除?" onConfirm={() => this.handleDelRow(record.seat_id, pagination)}>
                        <AuthButton auth="adConfigruation.delete" ghost  className={styles.btn} size="small">删除</AuthButton>
                    </Popconfirm>
                </p>
            ),
        }];
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows);
            },
        };
        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            ...pagination,
        };
        return(
            <div className={styles.standardTable}>
                <Table
                loading={loading}
                rowKey={record => record.seat_id}
                rowSelection={rowSelection}
                dataSource={list}
                columns={columns}
                pagination={paginationProps}
                onChange={this.handleTableChange}
                onExpandedRowsChange={this.onExpandedRowsChange}
                expandedRowKeys={this.state.expandedRowKeys}/>

            </div>
        );
    }
}